import React, {PureComponent} from "react";
import {
    Button,
    StyleSheet,
    Text,
    TouchableOpacity,
    DeviceEventEmitter,
    Image,
    View,
    Dimensions,
    Modal,
    SectionList,
    ListView
} from "react-native";
import ClosableModal from "rn-closable-modal";
import MineSubjectModalCell from "./MineSubjectModalCell";


const {width} = Dimensions.get('window')

type Props = {
    isShow:boolean,
    callbackSubject:Function,
    subject_title:string,
}


export default class MineSubjectModal extends PureComponent<Props,State> {

    constructor(props) {
        super(props);
        this.state = {
            sections: [
                {
                    key: '小学',
                    data: [[{name: '一年级', grade: 'primary_1'}, {name: '二年级', grade: 'primary_2'}, {
                        name: '三年级',
                        grade: 'primary_3'
                    }, {name: '四年级', grade: 'primary_4'}, {name: '五年级', grade: 'primary_5'}, {
                        name: '六年级',
                        grade: 'primary_6'
                    }]]
                },
                {
                    key: '初中',
                    data: [[{name: '初一', grade: 'middle_1'}, {name: '初二', grade: 'middle_2'}, {
                        name: '初三',
                        grade: 'middle_3'
                    }]]
                },
                {
                    key: '高中',
                    data: [[{name: '高一', grade: 'heigh_1'}, {name: '高二', grade: 'heigh_2'}, {
                        name: '高三',
                        grade: 'heigh_3'
                    }]]
                },
            ],
            selectString: props.subject_title,
        }
    }

    //参数需要{}修饰，告诉是个对象
    _renderSectionHeader = ({section}) => {
        return (
            <View style={{flex: 1, height: 17, justifyContent: 'center'}}>
                <Text style={styles.section_title}>{section.key}</Text>
            </View>
        )
    };

    _selectCell(data) {
        this.setState({selectString: data.name, grade: data.grade})
        this.props.callbackSubject({grade: data.grade, name: data.name})
        // DeviceEventEmitter.emit('grade',{grade:data.grade,subject:''})


    }

    renderCells(item) {

        var cells = []
        for (let i = 0; i < item.length; i++) {
            let data = item[i]
            let cell = <MineSubjectModalCell value={data} key={data.name} selectIndexString={this.state.selectString}
                                             callbackSubject={(data)=>{this._selectCell(data)
            }}/>
            cells.push(cell)
        }
        return (
            <View style={styles.list}>
                {cells}
            </View>
        )
    }

    //参数需要{}修饰，告诉是个对象
    _renderItem = (item) => {
        return (
            this.renderCells(item.item)
        )
    };
    _extraUniqueKey = (item) => {
        return "index" + item;
    };
    _onModalClosed = () => {
        var value = this.props.subject_title
        this.setState({selectString: value})
        this.props.callbackSubject(value)
    }

    render() {
        return (
            <ClosableModal
                animationType='fade'
                show={this.props.isShow}
                onClose={this._onModalClosed}
                transparent={true}
            >
                <View
                    style={styles.backgroundView}>
                    <View style={styles.container}>
                        <Text style={styles.contain_title} onPress={() => {
                        this.props.callbackSubject()
                    }}>设置所在的年级</Text>
                        <View style={{alignItems: 'flex-start', flexDirection: 'row'}}>
                            <SectionList style={styles.section_flat}
                                         scrollEnabled={false}
                                         renderItem={this._renderItem}
                                         renderSectionHeader={this._renderSectionHeader}
                                         showsVerticalScrollIndicator={false}
                                         keyExtractor={this._extraUniqueKey}
                                         sections={this.state.sections}>

                            </SectionList>
                        </View>
                    </View>
                </View>
            </ClosableModal>
        )
    }
}
const styles = StyleSheet.create({
    backgroundView: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
    },
    container: {
        backgroundColor: 'white',
        height: 332,
        width: 351,
        alignItems: 'center',
        borderRadius: 3,
    },
    contain_title: {
        color: 'black',
        fontSize: 16,
        fontWeight: 'bold',
        marginTop: 30,
    },
    section_flat: {
        marginTop: 15,
        marginLeft: 28,
        marginBottom: 30,
    },
    section_title: {
        color: 'rgba(0,0,0,0.8)',
        fontSize: 14,
    },
    list: {
        flexDirection: 'row', //这里的属性很重要，可以学习下flex布局
        flexWrap: 'wrap',
        alignItems: 'flex-start',
        justifyContent: 'space-around',
        backgroundColor: '#FFFFFF',
        paddingLeft: 29,
        paddingTop: 15,
        paddingRight: 28,
    },


})